import React, {useImperativeHandle, forwardRef, useState, useEffect} from 'react';
import {Input, Collapse, Row, Col} from "antd";
import style from "./propertiesPanel.module.scss"
import TextArea from "antd/es/input/TextArea.js";

const Gateway = forwardRef((props, ref) => {


    const [element, setElement] = React.useState(null);
    const [moder, setModer] = React.useState(null);
    const [id,setId] = React.useState(null)
    const [name,setName]  = useState(null)


    useEffect(() => {
        setInputData(element)
    },[element])


    useImperativeHandle(ref, () => ({
        callback
    }));
    const callback = (element,moder) => {
        setElement(element)
        setModer(moder)
    }


    const setInputData = (element) => {
        if(element){
            setId(element.id)
            setName(element.businessObject.name)
        }
    }


    return (
        <div className={props.type && props.type === 'bpmn:ExclusiveGateway' ? style.show : style.hide}>
            <Collapse items={[
                {
                    key: 1,
                    label: "常规",
                    children: (
                        <div>
                            <Row justify={"center"} align={"middle"}>
                                <Col span={6}>ID:</Col>
                                <Col span={18}>
                                    <Input value={id}  />
                                </Col>
                            </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>名称:</Col>
                                <Col span={18}>
                                    <Input  value={name}  />
                                </Col>
                            </Row>
                        </div>
                    )
                },
                {
                    key: 2,
                    label: "描述文档",
                    children: (
                        <div>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>文档:</Col>
                                <Col span={18}>
                                    <TextArea size={"middle"}  placeholder="文档" />
                                </Col>
                            </Row>
                        </div>
                    )
                },
            ]} ghost={true} defaultActiveKey={1}>
            </Collapse>
        </div>
    );

})

export default Gateway;

